
export default function centerTitle() {
    var canvas_centerTitle = document.getElementById('heter-centerTitle');
    var centerTitle_w = canvas_centerTitle.clientWidth;
    var centerTitle_h = canvas_centerTitle.clientHeight;
    var ctx_centerTitle = canvas_centerTitle.getContext('2d');
    canvas_centerTitle.width = centerTitle_w;
    canvas_centerTitle.height = centerTitle_h;
    ctx_centerTitle.width = centerTitle_w;
    ctx_centerTitle.height = centerTitle_h;
    ctx_centerTitle.fillStyle = 'rgba(0,0,0,0)';
    ctx_centerTitle.fillRect(0, 0, centerTitle_w, centerTitle_h);
    var centerTitle_px = 0, centerTitle_py = 40, centerTitle_dx = 1, centerTitle_dy = 0;
    var steep_x = 4, steep_y = 4;
    var turnings = [
        { x: centerTitle_w / 2 - 100, y: 40 },
        { x: centerTitle_w / 2 - 60, y: 0 },
        { x: centerTitle_w / 2 + 60, y: 0 },
        { x: centerTitle_w / 2 + 100, y: 40 },
    ]
    // var turning_x = centerTitle_w - 40, turning_y = 40;
    function draw_centerTitle() {
        ctx_centerTitle.save();
        ctx_centerTitle.fillStyle = 'rgba(1,15,75,0.1)';
        ctx_centerTitle.moveTo(0, 40);
        ctx_centerTitle.lineTo(turnings[0].x, turnings[0].y);
        ctx_centerTitle.lineTo(turnings[1].x, turnings[1].y);
        ctx_centerTitle.lineTo(turnings[2].x, turnings[2].y);
        ctx_centerTitle.lineTo(turnings[3].x, turnings[3].y);
        // ctx_centerTitle.lineTo(200, 40);
        // ctx_centerTitle.lineTo(turning_x, 40);
        ctx_centerTitle.lineTo(centerTitle_w, 40);
        ctx_centerTitle.lineTo(centerTitle_w, centerTitle_h);
        ctx_centerTitle.lineTo(0, centerTitle_h);
        ctx_centerTitle.lineTo(0, 40);
        ctx_centerTitle.fill();
        ctx_centerTitle.restore();
        ctx_centerTitle.save();
        ctx_centerTitle.fillStyle = 'rgba(255,215,0,1)';
        ctx_centerTitle.fillRect(centerTitle_px, centerTitle_py, 4, 4);
        ctx_centerTitle.restore();
        if (centerTitle_dx * centerTitle_dy != 0) {
            centerTitle_px += centerTitle_dx * 2;
            centerTitle_py += centerTitle_dy * 2;
        } else {
            centerTitle_px += centerTitle_dx * steep_x;
            centerTitle_py += centerTitle_dy * steep_y;
        }

        if (centerTitle_px >= 0 && centerTitle_py == 40 && centerTitle_px <= turnings[0].x) {
            // centerTitle_px = 156;
            centerTitle_dx = 1;
            centerTitle_dy = 0;
        }
        if (centerTitle_px >= turnings[0].x && centerTitle_py == 40 && centerTitle_px <= turnings[1].x) {
            centerTitle_px = turnings[0].x;
            centerTitle_dx = 1;
            centerTitle_dy = -1;
        }
        if (centerTitle_px >= turnings[1].x && centerTitle_py <= 0 && centerTitle_px < turnings[2].x - 4) {
            centerTitle_py = 0;
            centerTitle_dx = 1;
            centerTitle_dy = 0;
        }
        if (centerTitle_px >= turnings[2].x - 4 && centerTitle_py == 0 && centerTitle_px < turnings[3].x) {
            centerTitle_px = turnings[2].x - 4;
            centerTitle_dx = 1;
            centerTitle_dy = 1;
        }
        if (centerTitle_px >= turnings[3].x && centerTitle_py <= 80 && centerTitle_px < centerTitle_w - 4) {
            // centerTitle_px = turnings[3].x;
            centerTitle_py = 40;
            centerTitle_dx = 1;
            centerTitle_dy = 0;
        }


        if (centerTitle_px >= centerTitle_w - 4 && centerTitle_py <= centerTitle_h - 4) {
            centerTitle_px = centerTitle_w - 4;
            centerTitle_dx = 0;
            centerTitle_dy = 1;
        }
        if (centerTitle_px == centerTitle_w - 4 && centerTitle_py >= centerTitle_h) {
            centerTitle_py = centerTitle_h - 4;
            centerTitle_dx = -1;
            centerTitle_dy = 0;
        }
        if (centerTitle_py == centerTitle_h - 4 && centerTitle_px <= 0) {
            centerTitle_px = 0;
            centerTitle_dx = 0;
            centerTitle_dy = -1;
        }
        if (centerTitle_py <= 40 && centerTitle_px == 0) {
            centerTitle_py = 40;
            centerTitle_dx = 1;
            centerTitle_dy = 0;
        }
        requestAnimationFrame(draw_centerTitle);
    };
    draw_centerTitle()
}